<template>
  <div>
    <login-andi v-if="loginPageName === 'andi'"></login-andi>
    <login-huacon v-if="loginPageName === 'huacon'"></login-huacon>
    <!-- huacon -->
    <login-anheng v-if="loginPageName === 'anheng'"></login-anheng>
    <login-helishi v-if="loginPageName === 'helishi'"></login-helishi>
    <login-huanyu v-if="loginPageName === 'huanyu'"></login-huanyu>
    <login-lvmeng v-if="loginPageName === 'lvmeng'"></login-lvmeng>
    <login-jiepu v-if="loginPageName === 'jiepu'"></login-jiepu>
    <login-tiandun v-if="loginPageName === 'tiandun'"></login-tiandun>
    <login-wangan v-if="loginPageName === 'wangan'"></login-wangan>
    <login-wangteng v-if="loginPageName === 'wangteng'"></login-wangteng>
    <login-zhuoyue v-if="loginPageName === 'zhuoyue'"></login-zhuoyue>
    <login-bozhi v-if="loginPageName === 'bozhi'"></login-bozhi>
    <login-null v-if="loginPageName === 'null'"></login-null>
    <login-yinke v-if="loginPageName === 'yinke'"></login-yinke>
  </div>
</template>

<script>
// import CategoryDialog from '../pages/Safe/ddos/components/CategoryDialog'
import LoginAndi from './LoginPage/LoginAndi'
import LoginHuacon from './LoginPage/LoginHuacon'
import LoginAnheng from './LoginPage/LoginAnheng'
import LoginBozhi from './LoginPage/LoginBozhi'
import LoginHelishi from './LoginPage/LoginHelishi'
import LoginHuanyu from './LoginPage/LoginHuanyu'
import LoginLvmeng from './LoginPage/LoginLvmeng'
import LoginJiepu from './LoginPage/LoginJiepu'
import LoginTiandun from './LoginPage/LoginTiandun'
import LoginWangan from './LoginPage/LoginWangan'
import LoginWangteng from './LoginPage/LoginWangteng'
import LoginZhuoyue from './LoginPage/LoginZhuoyue'
import LoginNull from './LoginPage/LoginNull'
import LoginYinke from './LoginPage/LoginYinke'
import { setOem } from '@/utils/auth'
import { loginOem } from '@/api/login'
import { getLanguageInfo } from '@/api/home'
import Cookies from 'js-cookie'
export default {
  components: { LoginAndi, LoginHuacon, LoginAnheng, LoginBozhi, LoginHelishi, LoginHuanyu, LoginLvmeng, LoginJiepu, LoginTiandun, LoginWangan, LoginWangteng, LoginZhuoyue, LoginNull, LoginYinke },
  name: 'Login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入用户名')))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入密码')))
      } else if (value.length < 8) {
        callback(new Error(this.$t('密码长度不能少于8位')))
      } else {
        callback()
      }
    }
    return {
      // categoryDialogVisible: false,
      ruleForm: {
        username: '',
        password: ''
      },
      loginPageName: '',
      loading: false,
      loginRules: {
        username: [{ required: false, trigger: 'blur', validator: validateUsername }],
        password: [{ required: false, trigger: 'blur', validator: validatePassword }]
      },
      icoList: ['huacon', 'anheng', 'helishi', 'lvmeng', 'tiandun', 'wangan', 'wangteng', 'bozhi', 'huanyu']
    }
  },
  mounted () {
    loginOem().then(res => {
      this.loginPageName = res.info
      // this.loginPageName = 'zhuoyue'
      if (this.icoList.includes(this.loginPageName)) {
        var link = document.querySelector("link[rel*='icon']") || document.createElement('link')
        link.type = 'image/x-icon'
        link.rel = 'shortcut icon'
        link.href = 'static/ico/' + this.loginPageName + '.ico'
        document.getElementsByTagName('head')[0].appendChild(link)
      }
      setOem(this.loginPageName)
    })
    getLanguageInfo().then(res => {
      if (res.info === 'zh_CN') {
        this.$i18n.locale = 'zh'
        Cookies.set('language', 'zh')
      } else if (res.info === 'en_US') {
        this.$i18n.locale = 'en'
        Cookies.set('language', 'en')
      }
    })
  },
  methods: {

  }
}
</script>

<style scoped>
.container {
  /* width: 40%; */
  position: relative;
  width: 100%;
  height: 100vh;
  /* background: url("../assets/img/keylogin.jpg") no-repeat fixed; */
  background-size: cover;
  /* padding: 1px; */
  box-sizing: border-box;
  z-index: 1;
  /* overflow: hidden; */
  /* background-color: rgb(255, 255, 255, 0.5); */
}

/* .container::after {
  content: "";
  width: calc(100%);
  height: calc(100vh);
  position: absolute;
  background: inherit;
  -webkit-filter: blur(20px);
  filter: blur(20px);
  z-index: 2;
  right: 0;
  bottom: 0;
} */

.loginForm {
  position: absolute;
  left: 65%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* width: 400px; */
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  /* border: 2px solid rgba(255, 255, 255, 0.6); */
  /* background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px); */
  background-color: rgba(255, 255, 255, 0.6);
}

.loginTitle {
  margin: 0;
  /* height: 100px; */
  color: #fff;
  font-size: 24px;
  /* border-radius: 10px; */
  letter-spacing: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: url("../assets/img/snowMountain3.jpeg") no-repeat;
  background-size: cover;
  background-position: 0% 50%; */
}

.loginFormItem {
  margin-top: 20px;
  margin: 40px 40px;
  width: 240px;
}

.loginLogo {
  position: absolute;
  width: 200px;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.1); */
  left: 15%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* background-color: rgba(255, 255, 255, 1); */
  background-image: linear-gradient(145deg, #ccccff, #99ccff);
}

.textLogin {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 20%;
  width: 300px;
  z-index: 1001;
}

.loginButton {
  width: 100%;
  margin-top: 10px;
  border: none;
  background-image: linear-gradient(to right, #336699, #009999),
    linear-gradient(to right, #336699, #009999);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  z-index: 10;
}
</style>
<style>
/* .loginButton::before {
  width: 240px;
  height: 30.5px;
  margin-left: 1px;
  margin-top: 1px;
} */
</style>
